<template>
  <div class="dictionary">
    <header-nav />
    <search />
    <el-main>
      <word />
    </el-main>
    <el-footer>
      <el-footer>
        <footer-box v-if="!isMobile" />
        <tab-bar v-else />
      </el-footer>
    </el-footer>
    <el-backtop :bottom="100" />
  </div>
</template>

<script lang="ts" setup>
import FooterBox from '@/components/common/FooterBox.vue'
import HeaderNav from '@/components/common/HeaderNav.vue'
import TabBar from '@/components/header-nav/TabBar.vue'
import Search from '@/components/dictionary/Search.vue'
import Word from '@/components/dictionary/Word.vue'

const isMobile = window.isMobile
</script>
<style lang="scss" scoped>
.dictionary {
  .el-main {
    margin-bottom: 50px;
  }

  .el-footer {
    height: 30px;
    line-height: 30px;
    text-align: center;
    width: 100%;
    position: fixed;
    bottom: 0;
    padding: 0;
  }
}
@media screen and (max-width: 480px) {
  .dictionary {
    .el-main {
      padding: 0;
      margin-bottom: 70px;
    }
    .el-footer {

      height: 60px;
      line-height: 60px;
    }
  }
}
</style>
